<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head
        th:replace="~{segmentation/_header::_header_common(~{::title},~{::link},~{::style})}">
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <link rel="stylesheet" th:href="@{/css/custom/login/login.css?v=1.0.0}" media="all">
    <style type="text/css">
        /* 整个页面背景样式 */
        html body {
            background: #000000;
        }

        /* 黑客帝国效果样式 */
        canvas {
            position: fixed;
            top: 0px;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" id="xxxx-login" action="">
                <div class="layui-form-item logo-title">
                    <h1>XXXX后台登录</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input type="text" id="username" name="username" lay-verify="required|account" lay-reqText="账号不能为空"
                           lay-verType="tips"
                           placeholder="请输入账号"
                           autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input type="password" id="password" name="password" lay-verify="required|password"
                           lay-reqText="密码不能为空"
                           lay-verType="tips"
                           placeholder="请输入密码"
                           autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captchaCode"></label>
                    <input type="text" id="captchaCode" name="captchaCode" lay-verify="required|captchaCode"
                           lay-reqText="运算结果不能空"
                           lay-verType="tips"
                           placeholder="请输入运算结果"
                           autocomplete="off" class="layui-input verification captcha" value="">
                    <div class="captcha-img">
                        <img id="defaultCaptcha" src="/default/captcha">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="rememberMe" id="rememberMe" value="true" lay-skin="primary"
                           title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button type="submit" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>
        </div>
    </div>
</div>
<canvas id="hacker-empire-effects"></canvas>
<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<script th:src="@{/js/plugins/jsencrypt/jsencrypt.js?v=1.0.0}"
        charset="utf-8" type="text/javascript"></script>
<!-- 黑客帝国入侵效果图 -->
<script type="text/javascript" th:src="@{/js/plugins/hacker-empire-effects/hacker-empire-effects.js}"></script>
<!-- 黑客帝国入侵效果图 -->
<script th:inline="javascript">
    layui.use(['form','encryption'], function () {
        var form = layui.form,
            layer = layui.layer,
            encryption = layui.encryption;
        window.sessionStorage.clear();

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // // 粒子线条背景
        // $(document).ready(function () {
        //     $('.layui-container').particleground({
        //         dotColor: '#5cbdaa',
        //         lineColor: '#5cbdaa'
        //     });
        // });

        //验证码图片点击刷新事件
        $(document).off('click', '#defaultCaptcha');
        $(document).on('click', '#defaultCaptcha', function () {
            $(this).attr("src", "/default/captcha?t=" + Math.random());
        })

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            // if (data.captcha == '') {
            //     layer.msg('验证码不能为空');
            //     return false;
            // }
            // layer.msg('登录成功', function () {
            //     window.location = '/index.html';
            // });
            encryption.setKeySize(2048);
            var password = encryption.encryptPublicKey(data.password);
            $.ajax({
                url: "/login",
                type: "post",
                dataType: "json",
                data: {
                    username: data.username,
                    password: password,
                    captchaCode: data.captchaCode,
                    // googleCode: googleCode,
                    "remember-me": data.rememberMe
                },
                /* beforeSend:function(){
                    //loading
                // $(".modal").modal("show");
                    //$.Huimodalalert('正在登录...',1000);
                    $.ligerDialog.waitting('正在登录中,请稍候...');
                }, */
                /* complete:function(){
                    //$.Huimodalalert.hide();
                    //display loading
                //	 $(".modal").modal("hide");
                    $.ligerDialog.closeWaitting();
                }, */
                error: function (request, textStatus, errorThrown) {
                    layer.msg('系统异常!', {icon: 5});
                },
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    // if (data.code == Result.VERIFY) {
                    //     //if(true){
                    //     //提示谷歌验证码
                    //     if (codeFlag) alert(data.msg);
                    //     //弹窗输入验证码
                    //     layer.prompt({
                    //         formType: 0,
                    //         value: '',
                    //         title: '请输入谷歌验证码',
                    //         area: ['800px', '350px'] //自定义文本域宽高
                    //     }, function (value, index, elem) {
                    //         codeFlag = true;
                    //         loginPost(username, password, verifyCode, value, remember);
                    //         layer.close(index);
                    //     });
                    //     /*  $.ligerDialog.prompt('请输入谷歌验证码','', function (yes,value) {
                    //          codeFlag=true;
                    //          if(yes)
                    //              loginPost(username,password,verifyCode,value);
                    //          }); */
                    //     return;
                    // }
                    //刷新验证码
                    // resetCode();
                    //console.log(data);
                    if (data.code == Result.SUCCESS) {
                        location.href = "/init/index";
                        return;
                    }
                    $("#defaultCaptcha").click();
                    layer.msg(data.msg, {icon: 0});
                    return;
                }
            })
            return false;
        });


    });

</script>
</body>
</html>